<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="/stylesheets/reset.css">
  <link rel="stylesheet" href="/stylesheets/login.css"/>
  <title>小马物联网</title>
</head>
<body>
<h2 class="title">初次使用请绑定手机号</h2>
<div class="regist-pannel" id="regist-pannel">
  <div class="from-group">
    <span class="from-label">手机号</span>
    <input type="text" placeholder="请输入手机号" class="phone-num" />
    <span id="regist_btn" class="regist-btn forbiden">发送验证码</span>
  </div>
  <div class="from-group">
    <span class="from-label">验证码</span>
    <input type="text" placeholder="请输入验证码" class="regist-num" />
  </div>
  <span id="submit" class="submit forbiden">确定</span>
</div>
<script src="/js/zepto.min.js"></script>
<script src="/js/touch.js"></script>
<script src="/js/fx.js"></script>
<script>
  //验证手机号的函数
  var regitst_phone = function(){

    //获取电话号码认证面板
    var _phonePannel =$('#regist-pannel')
    //获取输入手机号的input选框
    var _phoneInput = _phonePannel.find('.phone-num')
    //获取验证码的input选框
    var _registNum = _phonePannel.find('.regist-num')
    //获取获得验证码的按钮
    var _registBtn = _phonePannel.find('#regist_btn')
    //获取提交按钮
    var _submit = _phonePannel.find('#submit')

    var _registFlag = {
      isPhoneNumCorrect:false,
      isRecevingMsg:false,
      isRegistNotNull:false
    }

    //改变确定按钮样式的方法
    var _changCommitBtn = function(target){
      if($(target).hasClass("forbiden")){
        $(target).removeClass("forbiden")
      }else if($(target).hasClass("active")){
        $(target).removeClass("active")
      }
      if(_registFlag.isPhoneNumCorrect&&_registFlag.isRegistNotNull){
        $(target).addClass("active")
      }else{
        $(target).addClass("forbiden")
      }
    }

    //使验证码图标变为禁止状态的函数
    var _forbidenBtn = function(target){

      if(target.hasClass('active')){
        target.removeClass('active')
      }
      target.addClass('forbiden')
    }
    //使验证码图标变为激活状态的函数
    var _activeBtn = function(target){
      if(target.hasClass('forbiden')){
        target.removeClass('forbiden')
      }
      target.addClass('active')
    }

    //输入手机号input框的事件监听
    _phoneInput.on('input',function(){
      _registFlag.isPhoneNumCorrect = false
      //获取电话号码
      var phoneNum = $(this).val()
      _forbidenBtn(_registBtn)
      if(phoneNum.match(/^1(3|4|5|7|8)\d{9}$/)){
        _registFlag.isPhoneNumCorrect = true

        if(_registFlag.isPhoneNumCorrect&&!_registFlag.isRecevingMsg){
          _activeBtn(_registBtn)
        }
      }
      _changCommitBtn(_submit)
    })
    _registNum.on('input',function(){
      //获取验证码input框事件监听
      var registCode = $(this).val()

      if(registCode!= ""){
        _registFlag.isRegistNotNull = true
      }else{
        _registFlag.isRegistNotNull = false
      }
      _changCommitBtn(_submit)
    })
    _registBtn.on('tap',function(){
      if(_registFlag.isPhoneNumCorrect&&!_registFlag.isRecevingMsg){
        _forbidenBtn(_registBtn)
        _registFlag.isRecevingMsg = true
        _setCountDown(function(){
          if(_registFlag.isPhoneNumCorrect){
            _activeBtn(_registBtn)
          }else{
            _forbidenBtn(_registBtn)
          }
          _registFlag.isRecevingMsg = false
        })
      }
    })

    //点击确定按钮执行的操作
    _submit.on('tap',function(){

      if(_registFlag.isPhoneNumCorrect && _registFlag.isRegistNotNull){

        var phoneNum = _phoneInput.val()

        var registCode = _registNum.val()

        if(phoneNum == '18310616080' && registCode=='1234'){

          alert('输入正确')

        }else{

          alert('手机号或验证码错误')

        }
      }

    })
    //设置倒计时的方法
    var _setCountDown = function(cb){
      var limitTime = 60
      var timer = null
      _registBtn.text(limitTime+'s后重试')
      timer = setInterval(function(){
        if(limitTime<=1){
          clearInterval(timer)
          timer = null
          if(typeof cb == 'function'){
            cb()
          }
        }
        if(limitTime==1){
          _registBtn.text('发送验证码')
        }else{
          _registBtn.text(--limitTime+'s后重试')
        }

      },1000)

    }
  }

     var regist = new regitst_phone()
</script>
</body>
</html>